<template>
  <div class="">
    <Row  :gutter="20">
      <Col  :md="24" :lg="12">
        <Row style="margin: 10px 0px;">
          <Input v-model="classone" placeholder="一级分类名称" clearable style="width: 200px" @on-keyup.enter="search('one')"></Input>
          <span style="margin: 0px 10px;">
            <button type="button" class="ivu-btn ivu-btn-primary">
              <i class="ivu-icon ivu-icon-search"></i>
              <span>查询</span>
            </button>
          </span>
          <span style="margin: 0px 10px;">
            <button type="button" class="ivu-btn ivu-btn-primary" @click="add('one')">
              <Icon type="plus-round"></Icon>
              <span>新增</span>
            </button>
          </span>
        </Row>
        <Table :columns="columns" :data="allData | capitalize(classone)" border @on-row-click="selected"></Table>
      </Col>
      <Col :md="24" :lg="12">
        <Row style="margin: 10px 0px;">
          <!-- <Input v-model="value14" placeholder="二级分类名称" clearable style="width: 200px" @on-keyup.enter="search('two')"></Input> -->
          <label>上级分类: {{this.onerow ? this.onerow.name : ''}}</label>
          <span style="margin: 0px 10px;">
            <button type="button" class="ivu-btn ivu-btn-primary">
              <i class="ivu-icon ivu-icon-search"></i>
              <span>查询</span>
            </button>
          </span>
          <span style="margin: 0px 10px;">
            <button type="button" class="ivu-btn ivu-btn-primary" @click="add('two')">
              <Icon type="plus-round"></Icon>
              <span>新增</span>
            </button>
          </span>
        </Row>
        <Table :columns="columns" :data="secondData" border></Table>
      </Col>
    </Row>

    <Modal v-model="show" title="新增分类名称" @on-cancel="cancelAction">
      <Form ref="formValidate" :label-width="80">
        <FormItem label="分类名称" prop="userName">
            <Input v-model="className" placeholder="输入分类名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" long  @click="confirm(opStr)">确定</Button>
      </div>
    </Modal>
  </div>

</template>
<script>
import axios from 'axios'
    export default {
      title: '题库分类参数管理',
      name: 'class-params',
        data () {
            return {
              action: '', // 操作类型
              className: '', // 新增的分类名称
              show: false,
              onerow: null, // 选中的一级分类
              tworow: null, // 选中的二级分类
              secondData: [], // 选中的一级分类选项
              opStr: '',
                classone: '',
                columns: [
                  {
                    title: '序号',
                    type: 'index',
                    align: 'center',
                    width: 80
                  },
                  {
                      title: '名称',
                      key: 'name'
                  },
                  {
                      title: '操作',
                      key: 'action',
                      width: 180,
                      align: 'center',
                      render: (h, params) => {
                          if (params.row.f_paramvalues && params.row.f_paramvalues.length > 0) {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                          this.modify(params.row)
                                        }
                                    }
                                }, '修改')
                            ]);
                          } else {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                          this.modify(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'primary'
                                    },
                                    on: {
                                        click: () => {
                                          this.deleteRow(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                          }

                      }
                    }
                ]
            };
        },
        methods: {
          add (str) {
            if (str === 'two' && !this.onerow) {
              this.$Modal.warning({title: '删除提醒', content: '请选择上级分类'})
              return
            }
            this.show = true
            this.opStr = str
            this.action = 'add'
          },
          search () {

          },
          selected (row, index) {
            this.secondData = row.f_paramvalues
            this.onerow = row
          },
          cancelAction () {
            this.action = ''
            this.className = ''
          },
          modify (row) {
            // console.log('row', row);
            this.show = true
            if (row.f_paramvalues) {
              // 修改一级
              this.opStr = 'one'
              this.onerow = row
              this.className = row.name
              // this.confirm('one')
            } else {
              // 修改二级
              this.opStr = 'two'
              this.className = row.name
              this.tworow = row
              // this.confirm('two')
            }
          },
          confirm (str) {
            if (str === 'one') { // 增加一级分类
              let data = {}
              if (this.action === 'add') {
                data = {
                  name: this.className
                }
              } else {
                data = {
                  name: this.className,
                  id: parseInt(this.onerow.id)
                }
              }
              axios.post('rs/entity/t_parameter', data).then(res => {
                this.show = false
                if (this.action === 'add') {
                  this.$store.dispatch('pushParam', {name: this.className, id: res.data.id,
                     EntityType: "t_parameter", f_paramvalues: []})
                  // this.onerow = null
                } else {
                  this.$store.dispatch('updataParam', {name: this.className, id: res.data.id})
                }
                this.className = ''
                this.action = ''
              }).catch(error => {

              })
            } else if (str === 'two') { // 增加二级分类
              let data = {}
              if (this.action === 'add') {
                data = {
                  name: this.className,
                  processid: this.onerow.id
                }
              } else {
                data = {
                  name: this.className,
                  id: parseInt(this.tworow.id)
                }

              }
              axios.post('rs/entity/t_paramvalue', data).then(res => {
                this.show = false
                this.className = ''

                let two = {
                  EntityType: "t_paramvalue",
                  id: res.data.id,
                  name: data.name,
                  processid: this.onerow.id
                }
                if (this.action === 'add') {
                  this.$store.dispatch('pushSecondParam', {one: this.onerow, two: two})
                  this.secondData.unshift(two)
                } else {
                  this.$store.dispatch('updataSecondParam', [this.onerow, {id: this.tworow.id, name: data.name}])

                  let twoindex = this.secondData.findIndex((value, index, arr) => {
                    return parseInt(value.id) === parseInt(this.tworow.id)
                  })
                  this.secondData[twoindex].name = data.name
                }

                this.action = ''
              }).catch(error => {
                console.log(error)
              })
            }
          },
          deleteRow (row) {
            this.$Modal.confirm({title: '删除提醒', content: '删除后不可恢复，确认删除吗？', onOk: () => {
              if (row.EntityType === 't_parameter') { // 删除一级
                axios.delete('rs/entity/t_parameter/'+ row.id).then((res) => {
                  this.$store.dispatch('deleteParam', {id: row.id})
                })
              } else if (row.EntityType === 't_paramvalue') { // 删除一级
                axios.delete('rs/entity/t_paramvalue/'+ row.id).then((res) => {
                  this.$store.dispatch('deleteSecondParam', [this.onerow, row])
                  let twoindex = this.secondData.findIndex((value, index, arr) => {
                    return parseInt(value.id) === parseInt(row.id)
                  })
                  this.secondData.splice(twoindex, 1)
                })

              }
            }})

          }
        },
        filters: {
          capitalize (value, name) {

            let arr = []
            value.forEach(item => {
              if (item.name.includes(name)) {
                arr.push(item)
              }
            })
            return arr
          }
        },
        computed: {
          allData () {
            return this.$store.state.params.params
          }
        }
    };
</script>
